<template>
	<view class="office">
		<div>
			<navitop>
				<i class="iconfont icon-jiantou-copy" slot="left-slot" @click="outlot"></i>
				<span slot="center-slot"><h4>编辑</h4></span>
				<i  slot="right-slot" class="iconfont icon-youcecaidan" v-if="nav_not" @click="class_sort"></i>
			</navitop> 
		</div>
		<view :style="'margin-top:' + nv_height">
			<div class="office_mod">
				<div class="office_title">
					<text class="Star_color">*</text><text>标题:</text><input v-model="dataSorce.title" >
				</div>
				<div class="office_title">
					<text class="Star_color">*</text><text>类型:</text>
					<picker class="office_picker" @change="office_time" :value="index" :range='array' mode="selector">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</div>
				<div class="office_title_on">
					<text>时间:</text>
					<div class="office_ovti" v-if="custom_time">
						<div>
							{{dataSorce.beginDate}}
						</div>
						<div>
							{{dataSorce.endDate}}
						</div>
					</div>
					<div class="office_ovti " v-else>
						<div>
							<kxTime :date="dataSorce.beginDate" :start='0' @rundata='beginTime' ></kxTime>
						</div>
						<div>
							<kxTime :date="dataSorce.endDate" :start='1' @rundata='lastTime' ></kxTime>
						</div>
					</div>
				</div>
				<div class="office_pl">
					<div>{{dataSorce.workType == 2 ? '总结' : dataSorce.workType == 3 ? '报表' :'计划'}}</div>
					<div class="textarea" contenteditable="true" ref="textare" v-html="dataSorce.content"></div>
				</div>
				<div class="office_pl" v-if="dataSorce.workType == 2">
					<div>评价:</div>
					<div class="textarea" contenteditable="true" ref="evaluate" v-html="dataSorce.myEvaluationContent"></div>
					<div class="office_evaluate">
						<text>自评等级:</text>
						<picker class="evaluate_picker" @change="evaluate_data" :value="index" :range='evaluate' mode="selector">
							<view class="uni-input" >{{dataSorce.myEvaluationLevel == '' ? '评价等级': dataSorce.myEvaluationLevel}}</view>
						</picker>
						
					</div>
				</div>
				<div class="office_pl" v-if="dataSorce.workType == 3">
					<div>计划:</div>
					<div class="textarea" contenteditable="true" ref="nextContent" v-html="dataSorce.nextContent"></div>
					<div>评价:</div>
					<div class="textarea" contenteditable="true" ref="myEvaluationContent" v-html="dataSorce.myEvaluationContent"></div>
					<div class="office_evaluate">
						<text>自评等级:</text>
						<picker class="evaluate_picker" @change="evaluate_data" :value="index" :range='evaluate' mode="selector">
							<view class="uni-input" >{{dataSorce.myEvaluationLevel == '' ? '评价等级': dataSorce.myEvaluationLevel}}</view>
						</picker>
						
					</div>
				</div>
				<div>
					<text>附件:</text>
					<imgUploaddify :max="3" :headers="token"  v-model="run_flse" :uploadSuccess="zidingyiSuccess" :action="action"></imgUploaddify>
				</div><br>
			</div>
			<div class="office_button" @click="edit_data">
				保存
			</div>
			
		</view>
		<!-- 气泡弹窗 -->
		 <chunLei-popups v-model="value" :popData="data_list" @tapPopup="tapPopup" :x="345" :y="95" placement="top-end">
		 </chunLei-popups>
		 
		 <!-- 弹窗选择用户 -->
		 <popus ref="al_user" >
				<div class="user_out">
					<div class="user_title">提交给:</div>
					<div><input @click="user_ti" disabled='true' v-model="dataSorce.ccName"></div>
				</div>
				<div class="user_out">
					<div class="user_title">抄送给:</div>
					<div><input @click="user_gei" disabled='true' v-model="dataSorce.submitName"></div>
				</div>
				<div class="user_buttom" @click="up_submit">
					提交
				</div>
		 </popus>
		 <popus ref="value_alert">
		 	<alertcenter @row="row" :dataSorc="userList" :titles="titles"></alertcenter>
		 </popus>
	</view>
</template>

<script> 
	import {getToday,getCurrWeekDays,getCurrMonthDays,getCurrQuarter,getCurrYear} from "@/common/api/job/alert"
	import imgUploaddify from "@/components/image-upload/image-upload"	
	import navitop from '@/components/common/navi-top'
	import popus from '@/uni_modules/uni-popup/components/uni-popup/uni-popups'
	import alertcenter from '@/pages/common/common/alert/searalertuser'	
	import kxTime from "@/components/kx-datetime/kx-datetime"
	import {pageList,save,deletes,approval,returnPlan,finish,worksubmit,getOfficeTreeDataList} from '@/common/api/job/office.js'
	import chunLeiPopups from "@/components/chunLei-popups/chunLei-popups";
	export default {
		components:{
			navitop,
			imgUploaddify,
			kxTime,
			chunLeiPopups,
			popus,
			alertcenter
		},
		data(){
			return {
				array: [],
				index: 0,
				title: '',
				value: false,
				nv_height: '',	//获取导航高度 
				token: [],
				data_list: [{title:'删除',code:1,icon:'icon-shanchu'}],
				ceshiData: [], // 图片显示
				action: '',
				choice_Time: '',	// 判断用户选择时间
				title_Name: '',
				dispaly_time: ['开始时间','结束时间'],	// 用户选择结果
				evaluate: ['A','B','C','D'],
				dataSorce: [],
				beginDate: '',     // 开始时间
				endDate: '',		// 结束时间
				custom_time: true,		// 自定义时间
				run_flse: [],		// 图片分布处理
				url: '',			// 路由
				uid: '',			// id
				nav_not: true,		// 显示菜单
				userList: [],		// 用户列表	
				titles: '用户联系人',	// 搜索联系人标题
				option_key: '',
			}
		},
		onLoad(option) {
			console.log(option)
			this.worType_key = option.key;
			this.url = '?key=' + option.key + '&title=' + option.title;
			this.uid = option.id;
			this.option_key = option.tabKey;
			
			this.data_details(option);
			
			this.nav_list(option.tabKey);
			
			this.user_list();
		},
		
		mounted() {
			this.nv_height = uni.getSystemInfoSync().statusBarHeight + 75 + 'px';
			this.token = {'Access-Token':uni.getStorageSync('token')};
			
			// 文件上传路径
			this.action = uni.getStorageSync('serverUrl') + '/uploadFile';
		},
		watch:{
			choice_Time(val){
				if(val == 3){
					this.array = ['日报','周报','月报','年报','自定义'];
				}else {
					this.array = ['周','月','季','年','自定义'];
				}
			}
		},
		methods: {
			
			// 获取用户选择信息
			row(val){

				if(val.option == 1){
					this.dataSorce.ccId = val.id.split('_')[0];
					this.dataSorce.ccName = val.name;
				}
				if(val.option == 2){
					this.dataSorce.submitId = val.id.split('_')[0];
					this.dataSorce.submitName = val.name;
				}
				this.$refs.value_alert.close();
			},
			
			// 打开用户选择列表
			user_ti(){
				this.userList.filter(function(item) {
					return item['option'] = 1;
				})
				this.$refs.value_alert.open('bottom');
			},
			
			user_gei(){
				this.userList.filter(function(item) {
					return item['option'] = 2;
				})
				this.$refs.value_alert.open('bottom');
			},
			
			// 获取提交/报送用户列表
			user_list(){
				let funs = [];
				getOfficeTreeDataList({'isLoadUser': 2}).then((rows) => {
					if(rows.code == 200){
						rows.data.forEach(item => {
							this.$set(item, 'uid' , item['id'].split('_')[0])
						})
						rows.data.filter(function (rows) {
							if(rows.parentId !== '0'){
								funs.push(rows)
							}
						})
						this.userList = funs;
						
					}
				})
			},
			
			// 模块操作列表
			nav_list(val){
				if(val == 1){
					this.data_list = [		// 气泡弹窗数据
						{title:'删除',code:1,icon:'icon-shanchu'},
						{title:'提交',code:3,icon:'icon-tianjiaadd143'},
						{title:'撤回',code:4,icon:'icon-icon_function_shenhetuihui'},
					]
				}
				if(val == 2){
					this.data_list = [		// 气泡弹窗数据
						// {title:'删除',code:1,icon:'icon-shanchu'},
						{title:'驳回',code:2,icon:'icon-tuihui'},
						{title:'存档',code:5,icon:'icon-dingdan'},
					]
				}
				if(val == 3){
					this.nav_not = false;
				}
			},
			
			// 气泡弹窗
			class_sort(){
				this.value = !this.value;
				if(this.dataSorce.status == 0 && this.option_key == 1){
					this.data_list = [		// 气泡弹窗数据
						{title:'删除',code:1,icon:'icon-shanchu'},
						{title:'提交',code:3,icon:'icon-tianjiaadd143'},
						// {title:'撤回',code:4,icon:'icon-icon_function_shenhetuihui'},
					]
				}else if(this.dataSorce.status == 1 && this.option_key == 1){
					this.data_list = [		// 气泡弹窗数据
						{title:'删除',code:1,icon:'icon-shanchu'},
						// {title:'提交',code:3,icon:'icon-tianjiaadd143'},
						{title:'撤回',code:4,icon:'icon-icon_function_shenhetuihui'},
					]
				}
			},
			
			// 气泡弹窗结果
			tapPopup(val){
				let _this = this;
				uni.showLoading({
					title: '加载中...'
				})
				if(val.code == 1){ // 删除
					uni.showModal({
						title: '提示',
						content: '确定要删除吗？',
						success(res) {
							if (res.confirm) {
								deletes([_this.uid]).then((rows)=>{
									if(rows.code == 200){
										uni.hideLoading();
										uni.showToast({
											title: '删除成功！'
										})
										setTimeout(()=>{
											uni.navigateBack({
												url: '/pages/common/index/office/officelist' + _this.url
											})
										},1500)
									}
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}
				if(val.code == 2){ // 审核: 
					delete _this.dataSorce.submitDate;
					_this.dataSorce['status'] = 1;
					_this.dataSorce['readStatus'] = 2;
						uni.showModal({
							title: '提示！',
							content: '确定要驳回吗？',
							success() {
								approval([_this.dataSorce]).then((rows)=>{
									if(rows.code == 200){
										uni.hideLoading();
										uni.showToast({
											title: '已驳回'
										})
										setTimeout(()=>{
											uni.navigateTo({
												url: "/pages/common/index/office/officelist?key=" + _this.choice_Time + '&title=' + _this.title_Name
											})
										},1500)
									}
								})
							}
						})
				}
				if(val.code == 3){ // 提交
					uni.hideLoading();
					this.$refs.al_user.open('center');
				}
				if(val.code == 4){ // 撤回
					returnPlan({id:this.uid}).then((rows) => {
						if(rows.code == 200){
							uni.hideLoading();
							uni.showToast({
								title: '撤回成功！'
							})
						}
					})
				}
				if(val.code == 5){ // 存档
					finish([_this.uid]).then((rows) => {
						if(rows.code == 200){
							uni.hideLoading();
							uni.showToast({
								title: '存档成功！'
							})
						}
					})
				}
				
			},
			
			// 用户点击提交报送
			up_submit(){
				this.dataSorce.createDate = '';
				this.dataSorce.submitDate = '';
				worksubmit(this.dataSorce).then((rows) => {
					if(rows.code == 200){
						uni.showToast({
							title: "提交成功"
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/common/index/office/officelist' + this.url
							})
						},1500)
					}
				})
			},
			
			// 自评等级
			evaluate_data(val){
				this.dataSorce.myEvaluationLevel = this.evaluate[val.detail.value];
			},
			
			// 保存数据
			edit_data(){
				uni.showLoading({
					title: '加载中...'
				})
				this.dataSorce.content = this.$refs.textare.innerHTML;
				
				if(this.choice_Time == 2){
					this.dataSorce.myEvaluationContent = this.$refs.myEvaluationContent.innerHTML;
				}
				
				if(this.choice_Time == 3){
					this.dataSorce.myEvaluationContent = this.$refs.myEvaluationContent.innerHTML;
					this.dataSorce.nextContent = this.$refs.nextContent.innerHTML;
				}
				
				this.dataSorce.files = this.run_flse.join(',')
				delete this.dataSorce.myEvaluationDate;
				save(this.dataSorce).then((rows)=> {
					if(rows.code == 200){
						uni.hideLoading();
						uni.showToast({
							title: '编辑成功'
						});
						setTimeout(()=>{
							uni.navigateBack({
								url: '/pages/common/index/office/officelist' + this.url
							})
						},1500)
					}
				})
			},
			// 获取自定义开始时间
			beginTime(val){
				this.dataSorce.beginDate = val;
			},
			// 获取自定义结束时间
			lastTime(val){
				this.dataSorce.endDate = val;
			},
			
			// 获取数据
			data_details(val){
				uni.showLoading({
					title: '加载中...'
				})
				pageList({current: 1,size: 20,tabKey: val.tabKey,workType: val.key}).then((rows) => {
					if(rows.code == 200){
						uni.hideLoading();
						for(let i in rows.data.records){
							if(rows.data.records[i].id == val.id){
								this.dataSorce = rows.data.records[i];
							}
						}
						this.choice_Time = this.dataSorce.workType;
						this.index = this.dataSorce.type-1;
						this.run_flse = this.dataSorce.files.split(',')
					}
				})
			},
			
			
			// 返回
			outlot(){
				uni.navigateBack({
					url: "/pages/common/index/office/officelist?key=" + this.choice_Time + '&title=' + this.title_Name
				})
			},
			
			// 获取选中期间
			office_time(val){
				this.index = val.detail.value;
				this.dispaly_time = [];
				if(this.index == 4){
					this.custom_time = false;
					return false;
				}
				this.custom_time = true;
				
				if(this.choice_Time == 3){
					if(this.index == 0){
						this.dataSorce.beginDate = getToday().endtime.substr(0,10);
						this.dataSorce.endDate = getToday().starttime.substr(0,10);
					}
					if(this.index == 1){
						this.office_Echo(this.index);
					}
					if(this.index == 2){
						this.office_Echo(this.index);
					}
					if(this.index == 3){
						this.office_Echo(4);
					}
				}else{
					
					if(this.index == 0){
						this.office_Echo(1);
					}
					if(this.index == 1){
						this.office_Echo(2);
					}
					if(this.index == 2){
						this.office_Echo(3);
					}
					if(this.index == 3){
						this.office_Echo(4);
					}
				}
			},
			
			office_Echo(val){
				if(val == 1){   // 周
					this.dataSorce.beginDate = getCurrWeekDays().endtime.substr(0,10);
					this.dataSorce.endDate = getCurrWeekDays().starttime.substr(0,10);
				}
				if(val == 2){	// 月
					this.dataSorce.beginDate = getCurrMonthDays().endtime.substr(0,10);
					this.dataSorce.endDate = getCurrMonthDays().starttime.substr(0,10);
				}
				if(val == 3){	// 季
					this.dataSorce.beginDate = getCurrQuarter().endtime.substr(0,10);
					this.dataSorce.endDate = getCurrQuarter().starttime.substr(0,10);
				}
				if(val == 4){	// 年
					this.dataSorce.beginDate = getCurrYear().endtime;
					this.dataSorce.endDate = getCurrYear().starttime;
				}
			},
			
			
			 //上传成功
			ceshiUploadSuccess(res) {
				var _res = JSON.parse(res.data);
				if (_res.code == 200) {
					this.ceshiData.push(_res.result);
				}
			},
			zidingyiSuccess(res){
				var _res = JSON.parse(res.data);
				 this.ceshiData.push(_res.url);
				 this.run_flse.push(_res.url);
				 console.log(this.ceshiData)
				if (_res.code == 200) {
					return {
						success: true,
						url: 'http://192.168.1.127:8000' + _res.result
					}
				} else {
					return {
						success: false,
						url: ''
					}
				}
			},
		}
	}
</script>

<style scoped lang="scss">
.office {
	height: 100%;
	width: 100%;
	.office_mod {
		width: 95%;
		background-color: #fff;
		margin: auto;
		margin-top: 10px;
		padding: 0 0 0 30rpx;
		.Star_color {
			color: red;
		}
		.office_title {
			display: flex;
			height: 90rpx;
			line-height: 90rpx;
			input {
				margin-left: 30rpx;
			}
			.office_picker {
				padding: 0 40% 0 40rpx;
			}
			.office_ovti {
				padding: 0 0 0 45rpx;
			}
		}
	}
	.office_button {
		margin: auto;
		text-align: center;
		padding: 10px 0 10px 0;
		background-color: rgb(34, 131, 228);
		border-radius: 4px;
		color: #fff;
	}
	.office_pl {
		textarea {
			width: 100%;
		}
		.office_evaluate {
			height: 90rpx;
			line-height: 90rpx;
			padding: 0 0 10px 0;
			display: flex;
		}
		.evaluate_picker {
			padding: 5rpx 30rpx 5rpx 30rpx;
			height: 60rpx;
			line-height: 60rpx;
			border: 1px solid #cacaca;
			border-radius: 4px;
			margin: 10rpx 0 0 30rpx;
		}
	}
	.textarea{
		width: 90%;

		min-height: 200px;

		// max-height: 300px;

		_height: 120px;

		margin-left: auto;

		margin-right: auto;

		padding: 3px;

		outline: 0;


		font-size: 12px;

		line-height: 24px;

		padding: 2px;

		word-wrap: break-word;

		overflow-x: hidden;

		overflow-y: auto;


}
	.office_comet {
		width: 75%;
		margin: auto;
	}
	
	.office_title_on {
		display: flex;
		.office_ovti {
			padding: 0 0 0 50rpx;
			div{
				height: 60rpx;
			}
		}
	}
	
	.user_out {
		width: 95%;
		margin: auto;
		background-color: #fff;
		height: 90rpx;
		line-height: 90rpx;
		padding: 10px 0 10px 0;
		display: flex;
		input {
			width: 100%;
			border: 1px solid #cacaca;
		}
		.user_title {
			padding: 0 30rpx 0 30rpx;
		}
	}
	.user_buttom {
		width: 95%;
		margin: auto;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #2283e4;
		color: #fff;
		border-radius: 4px;
		text-align:center;
	}

		
}
	
</style>
